<template>
    <div class="app-container">
      <el-form :inline="true" :model="params" ref="queryForm">
        <el-form-item label="登记姓名" prop="enrollName">
            <el-input v-model="params.enrollName" placeholder="请输入登记姓名"  
            clearable
            size="small"
            style="width: 180px"
             @keyup.enter.native="handleQuery"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="majorName">
          <el-input v-model="params.majorName" placeholder="请输入专业名称"
          clearable
          size="small"
          style="width: 180px"
          @keyup.enter.native="handleQuery"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" icon="el-icon-search" size="mini">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

        </el-form-item>
      </el-form>

      
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="toEdit">添加围栏</el-button>
        </el-col>
      </el-row>
  
      <el-table :data="configList" >
        <el-table-column label="序号" type="index"/>
        <el-table-column label="围栏名称" align="center" prop="fenceName" />
        <el-table-column label="围栏类型" align="center" prop="fenceType" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.fenceType==1">宿舍打卡</el-tag>
                <el-tag v-if="scope.row.fenceType==2">班级打卡</el-tag>
                <el-tag v-if="scope.row.fenceType==3">考勤打卡</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="是否有围栏信息" align="center" prop="fenced" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.fenced==1">存在围栏</el-tag>
                <el-tag v-if="scope.row.fenced==0">——</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="围栏信息" align="center">
            <template slot-scope="scope">
                <el-link type="primary" @click="showMap(scope.row.id)">查看围栏</el-link>
            </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status==1" type="success">有效</el-tag>
                <el-tag v-if="scope.row.status==0" type="">无效</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" prop="createBy" />
        <el-table-column label="生成时间" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="danger"
              circle
              @click="handleDelete(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="params.pageNum" :limit.sync="params.pageSize"
        @pagination="getList" />

        <el-dialog :visible="dialogVisible" 
            title="围栏范围"
            width="60%"
            :before-close="closeMap"
            >
            <fenceMap :id="fenceId" v-if="dialogVisible"></fenceMap>
        </el-dialog>
    </div>
  </template>
  
<script>
import { getPageList, deleteConfig,fenceDetail } from "@/api/workmgr/locationFence.js";

import fenceMap from "@/views/workmgr/locationFence/fenceMap";

  export default {
    name: "recruitEnroll",
    components:{
        fenceMap
    },
    data() {
      return {
        dialogVisible:false,
        polygon1:[],
        //列表显示
        params: { // 查询条件的值
          pageNum: 1,
          pageSize: 10,
          enrollName: undefined,
          majorName: undefined
        },
        configList: [],
        excelList: [],
        exportDataList:[],
        total: 0,
        map:null,
        fenceId:null
      };
    },
    
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getList();
    },
    methods: {
        closeMap(done){
            this.dialogVisible = false
        },
        showMap(id){
            this.dialogVisible= true
            this.fenceId = id
            // this.init()
            
        },
        handleEdit(row){
            this.$router.push({path: "/studentManagement/locations/editFence",query:{id:row.id}})
        },
        toEdit(){
            this.$router.push("/studentManagement/locations/editFence")
        },
      /** 工作考评列表 */
        getList() {
            getPageList(this.params).then(res => {
            this.configList = res.data.list;
            this.total = res.data.total;
            })
        },

    
        /** 搜索按钮操作 */
        handleQuery() {
            this.params.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.params.enrollName = null;
            this.params.majorName = null;
            this.resetForm("queryForm");
            this.handleQuery();
        },
        handleDelete(row){
            this.$confirm("确认要删除围栏吗?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                deleteConfig(row).then(resp => {
                this.msgSuccess("删除成功");
                this.getList();
                });
            });
        }
    }
}
  </script>

<style lang="less" scoped>
#containerMap{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 500px;
}
 /deep/ .el-dialog__body{
    padding: 0px;
}
</style>

